﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3之3D</title>
<style>
  	 *{ margin:0; padding:0; }
 	 li{ list-style:none; }
  	 #main{ width:150px; height:150px; border:1px #000 solid;
 	     position:relative; margin:5px; perspective:500px; }
 	 #main ul{ width:50px; height:50px; position:absolute; 
 	     left:50px; top:50px; transition:1s; }
 	 #main ul li{ width:50px; height:50px; position:absolute;
 	     color:white; line-height:50px; text-align:center; }
 	 #main ul li:nth-of-type(1){ background:red; }
 	 #main ul li:nth-of-type(2){ background:blue; }
 	 #main ul li:nth-of-type(3){ background:yellow;  }
 	 #main ul li:nth-of-type(4){ background:black; }
  	 #main ul li:nth-of-type(5){ background:pink;  }
 	 #main ul li:nth-of-type(6){ background:green;  }
 	 #main:hover ul{ transform:rotateY(180deg); }
</style>
</head>
<body>
<div id="main">
	<ul>
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
</body>
</html>
